<script setup lang="ts">
// 非空断言
// as 类型
// 注意点：一定要确保相应的值一定是非空
// 语法  值!  表示该值非空

import { onMounted, ref } from 'vue'

// 语法:  ! 作用：断言它前面的值非空
let arr = [{ id: 1, num: 2 }]
const findItem = arr.find(item => item.id === 1)
// if (findItem) {
//   findItem.num = 10
// }
findItem!.num = 10

const inputEvent = (e: Event) => {
  console.log((e.target as HTMLInputElement).value)
}
// 取input的dom并聚焦
const inputDom = ref<null | HTMLInputElement>(null)

onMounted(() => {
  // console.log(inputDom.value)
  // if (inputDom.value) {
  //   inputDom.value.focus()
  // }
  // 可选链操作符
  // inputDom.value?.focus()
  // 非空断言
  inputDom.value!.focus()
})
</script>

<template>
  <div class="app-page">
    <input ref="inputDom" type="text" @input="inputEvent($event)" />
  </div>
</template>

<style scoped></style>
